<template>
	<view class="box">
		<u-cell-group>
			<u-cell v-if="text === '编辑'" @click="changeUserInfo" name="info" clickable  title="头像">
				<u-avatar  slot="right-icon"  :src="user.info"></u-avatar>
			</u-cell>
			<u-cell v-if="text === '保存'" @click="addUserInfo"  name="info" clickable  title="头像">
				<u-avatar  slot="right-icon"  :src="fileID"></u-avatar>
			</u-cell>
			
			
			<u-cell v-if="text === '编辑'" @click="changeUserInfo" name="nickname"   clickable :isLink="true"   title="用户昵称" :value="user.nickname">	
			</u-cell>
			<u-cell v-if="text === '保存'"  name="nickname"   clickable :isLink="true"   title="用户昵称" >
				 <u--input
					slot="right-icon"
				    :placeholder="user.nickname"
				    border="surround"
				    v-model="nickname"
				  ></u--input>
			</u-cell>
			
			<u-cell @click="changeUserInfo" name="school"   clickable :isLink="true"   title="学校" :value="user.school"></u-cell>
		</u-cell-group>
		<view class="btn">
			<u-button @click="btnChange" shape="circle" type="primary" :text="text"></u-button>
		</view>
	</view>
</template>

<script>
	import { mapState, mapMutations } from 'vuex';
	export default {
		data () {
			return {
				user: {
					nickname: '',
					info: '',
					school: ''
				},
				text: '编辑',
				fileID: '',
				nickname: ''
			}
		},
		computed: {
			...mapState(['userInfo'])
		},
		methods: {
			...mapMutations(['login']),
			changeUserInfo (data) {
				if (this.text === '编辑') return uni.showToast({icon: 'none',title: '请先点击编辑按钮',duration: 2000})
				if (data.name === 'school') return uni.showToast({icon: 'none',title: '暂不支持修改学校',duration:2000})
			},
			btnChange () {
				if (this.text === '编辑') {
					this.text = '保存'
				} else { // 修改保存了
					this.text = '编辑'
					this.user.nickname = this.nickname;
					this.user.info = this.fileID;
					this.login(this.user)
					uni.showToast({
						icon: 'success',
						title: '修改成功',
						duration: 2000
					})
					uni.request({
						url: 'https://www.apricity.asia:8911/setting/changeUserInfo',
						method: 'POST',
						header: {
							Authorization: uni.getStorageSync('token') || ''
						},
						data: this.user,
						success: (res) => {
							console.log(res);
						}
					})
				}
			},
			/**
			 * 新增用户头像
			 */
			addUserInfo () {
				uni.chooseImage({
					count: 1,
					sizeType: 'compressed',
					success: async (res) => {
						console.log(res)
						uni.showLoading()
						const filePath = res.tempFilePaths[0]
						const cloudPath = res.tempFilePaths[0].substring(11)
						const result = await uniCloud.uploadFile({
							filePath: filePath,
							cloudPath: cloudPath,
							onUploadProgress: function(progressEvent) {
								console.log(progressEvent);
								var percentCompleted = Math.round(
									(progressEvent.loaded * 100) / progressEvent.total
								);
							}
						});
						uni.hideLoading()
						this.fileID = result.fileID
					},
					fail: (res) => {
						uni.showToast({
							icon: 'none',
							title: '您取消了选择',
							duration: 2000
						})
					}
				})
			}
		},
		onLoad () {
			this.user = this.userInfo
			this.fileID = this.user.info
			this.nickname  = this.user.nickname
		}
	}
</script>

<style lang="scss" scoped>
	.box {
		& .btn {
			width: 90%;
			margin: 20px 5%;
		}
	}
</style>
